<template>
  <div class="box">
    <el-card>
<!--   卡片的头部-->
      <template #header>
        <div class="card-header">
          <span>楼宇信息</span>
        </div>
      </template>
      <!--     搜索区域 -->
      <el-form inline>
      <el-form-item label="楼宇名称">
        <el-input v-model="name"  placeholder="请输入楼名">
        </el-input>
      </el-form-item>
      <el-form-item label="楼宇层数">
        <el-input v-model="height"  placeholder="请输入楼层">
        </el-input>
      </el-form-item>
        <el-form-item >
        <el-button type="primary" @click="searchData">搜索</el-button>
        <el-button type="success" @click="addData">添加</el-button>
      </el-form-item>
<!--      列表数据区域-->
        <el-table :data="tableData" >
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="楼名" />
          <el-table-column prop="height" label="层数" />
          <el-table-column prop="createTime" label="时间" :formatter="dateFormat"/>
          <el-table-column label="操作" >
            <template #default="scope">
              <el-button type="primary" @click="editBuilding(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteBuilding(scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <!--     卡片尾部区 -->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </template>
    </el-card>
  </div>
<!--  添加和修改的弹窗（抽屉）-->
  <el-drawer v-model="isShow" :title="title" direction="rtl">
    <el-form :model="buildingData">
      <el-form-item label="楼宇名称">
        <el-input v-model="buildingData.name"></el-input>
      </el-form-item>
      <el-form-item label="楼宇层数">
        <el-input v-model="buildingData.height"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitData">{{ title }}</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import * as buildingAPI from "@/api/building.js";
import dayjs from "dayjs";
export default {
  data() {
    return {
      //抽屉显示和隐藏
      isShow: false,
      title: "添加楼宇",
      //分页参数定义
      currentPage: 1,
      pageSize: 6,
      total: 0,
      //搜索的关键词
      name: "",
      height: "",
      //表格中需要显示的数据
      tableData: [],
      // 修改或添加时的数据对象
      buildingData: {},
    }
  },
  methods: {
    handleSizeChange() {
      this.loadBuildingList();
    },
    handleCurrentChange() {
      this.loadBuildingList();
    },
    //点击搜索按钮，触发条件搜索
    searchData() {
      this.loadBuildingList();
    },
    //点击添加按钮，
    addData(){
      this.isShow = true;
      this.title = "添加楼宇";
      this.buildingData = {};
    },
    //点击编辑按钮
    editBuilding(row) {
      this.isShow = true;
      this.title = "编辑完成";
      this.buildingData = row;
    },
    // 点击抽屉中的提交按钮数据的按钮
    submitData() {
      // 进行判断，区分当前是添加数据还是修改数据
      if (this.title == "添加楼宇") {
        buildingAPI.addBuilding(this.buildingData).then((res) => {
          if (res.data.code == 20000) {
            this.isShow = false;
            this.loadBuildingList();
          }
        });
      } else {
        buildingAPI.updateBuilding(this.buildingData).then((res) => {
          if (res.data.code == 20000) {
            this.isShow = false;
            this.loadBuildingList();
          }
        });
      }
    },
    //日期格式化
      dateFormat(row, column, cellValue, index) {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
      },
    async loadBuildingList() {
      //加载楼宇列表数据
      let res = await buildingAPI.getBuildingList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        name: this.name,
        height: this.height,
      });
      if (res.data.code == 20000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.tableData = [];
      }
    },
    //点击表格中的删除
    deleteBuilding(id){
      buildingAPI.deleteBuildById( {id : id}).then(res =>{
        if (res.data.code == 20000) {
          this.loadBuildingList();
        }
      });
    },
    },
  //在组建创建完成并初始化完成之后会执行的生命周期函数
  created(){
    this.loadBuildingList();
  },
};
</script>

<style scoped>
.box{
  height: 100%;
  width: 100%;
}
</style>